<template>
	<view class="whole-container" v-if="!data.showDetail">
		<ProductNavigator></ProductNavigator>
		<view style="padding-bottom: 120rpx;" :style="{'paddingTop':navBarHeight+'px'}">
			<swiper class="product-swiper-banner" >
				<swiper-item v-for="(item,index) in data.productList.slice(0,5)" :key="index">
					<image :src="item.pic_url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="product-body-container">
				<view class="product-body-item" v-for="(item,index) in data.productList" :key="index">
					<ProductItem :productInfo="item" :count="data.productOrder[data.productOrder.findIndex(item1 => item1.productInfo.id === item.id)].count" @changePrice="changePrice($event,item)" @goDetail="goDetail($event,index)"></ProductItem>
				</view>
			</view>
		</view>
	</view>
	<view class="product-detail-container" v-if="data.showDetail">
		<ProductDetailNavigator @showPart="show"></ProductDetailNavigator>
		<view :style="{'paddingTop':navBarHeight+'px'}">
			<image class="product-detail-image" :src="data.productList[data.showId].pic_url" mode="aspectFill"></image>
			<view class="product-detail-price-container">
				<view class="product-detail-discount-price"><text style="font-size: 22rpx;">￥</text>{{data.productList[data.showId].discount_price}}</view>
				<view class="product-detail-price"><text style="font-size: 24rpx;">原价</text><text style="font-size: 22rpx;">￥</text>{{data.productList[data.showId].price}}</view>
			</view>
			<view class="product-detail-title">{{data.productList[data.showId].product_name}}</view>
			<view class="product-detail-show-container">
				<view class="product-detail-show-sell">月售 {{data.productList[data.showId].sell_count}}</view>
				<view class="product-detail-show-sell">{{data.productList[data.showId].like_count}}人想要</view>
			</view>
			<view class="product-detail-desc">{{data.productList[data.showId].product_desc}}</view>
			<view v-if="data.productOrder[data.showOrderId].count==0" class="add-im" @tap="changeCount(0)">+ 加入订单</view>
			<view class="image-container" v-else>
				<image src="/page_product/static/minus.png" mode="widthFix" @tap="changeCount(1)"></image>
				<text>{{data.productOrder[data.showOrderId].count}}</text>
				<image src="/page_product/static/add1.png" mode="widthFix" @tap="changeCount(0)"></image>
			</view>
		</view>
	</view>
	<view class="fruit-popup-container" v-if="showPop">
		<view class="box" @tap="changePop(false)"></view>
		<view class="fruit-popup">
			<view class="fruit-popup-title">已点</view>
			<scroll-view class="" style="max-height: 600rpx;" scroll-y="true">
				<view v-for="(item,cIndex) in data.productOrder" :key="cIndex">
					<view class="show-item" v-if="item.count">
						<image :src="item.productInfo.pic_url" mode="aspectFill" class="left-image"></image>
						<view class="right">
							<view class="right-title">{{item.productInfo.product_name}}</view>
							<view class="right-desc">{{item.productInfo.product_desc}}</view>
						</view>
						<view class="image-container">
							<image src="/page_product/static/minus.png" mode="widthFix" @tap="changeNum(1,cIndex)"></image>
							<text>{{data.productOrder[cIndex].count}}</text>
							<image src="/page_product/static/add1.png" mode="widthFix" @tap="changeNum(0,cIndex)"></image>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
	<view class="product-foot-container">
		<image src="/page_product/static/fruit-buy.png" mode="aspectFit" @tap="changePop(true)"></image>
		<view class="product-foot-price">
			<text>￥</text>{{price}}
		</view>
		<button class="product-foot-btn" @tap="goSettle">去结算</button>
	</view>
	
</template>

<script>
	import Decimal from "decimal.js"
	import {onMounted, reactive,ref,computed} from "vue"
	import global from "../../config/global.js"
	import ProductItem from "../components/productItem.vue"
	import ProductNavigator from "../components/productNavigationBar.vue"
	import ProductDetailNavigator from "../components/productDetailNavigationBar.vue"
	import {cal} from '../../utils/cal.js'
	export default {
		name:"product",
		components:{
			ProductItem,
			ProductNavigator,
			ProductDetailNavigator
		},
		setup(){
			let data = reactive({
				productList:[],
				productOrder:[],
				showDetail:false,
				showId:-1,
				showOrderId:-1
			})
			
			let showPop = ref(false)
			// 窗口高度
			let windowHeight = uni.getSystemInfoSync()['windowHeight'];
			let scrollHeight = uni.getSystemInfoSync()['windowHeight'];
			
			let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			let res=wx.getMenuButtonBoundingClientRect();
			// 顶部导航栏高度
			let navBarHeight = statusBarHeight+res.height+10;
			
			onMounted(()=>{
				uni.request({
					url:`${global.BASE_URL}/product/get/all/1/10`,
					method:"GET",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						console.log(res)
						if(res.data.code){
							data.productList = res.data.data.list
							for(let item of res.data.data.list) {
								data.productOrder.push({
									count:0,
									productInfo:item
								})
							}
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			})
			
			let price = computed(()=>{
				
				let sum = 0;
				for(const item of data.productOrder){
					let t = cal.cheng(item.count,item.productInfo.discount_price);
					sum = cal.jia(sum,t);
				}
				return sum;
			})
			
			function changePrice(value,item){
				
				let index = data.productOrder.findIndex(item1 => item1.productInfo.id === item.id)
				if(index!=-1){
					data.productOrder[index].count = value
				}else{
					data.productOrder.push({
						count:value,
						productInfo:item
					})
				}
				console.log(data.productOrder)
			}
			
			function changePop(v){
				showPop.value = v
			}
			
			function show(){
				data.showDetail = false
				data.showId = -1
			}
			
			function goDetail(v,index){
				data.showId = index
				data.showDetail = true
				let i = data.productOrder.findIndex(item => item.productInfo.id == data.productList[index].id)
				data.showOrderId = i;
			}
			
			function changeCount(i){
				if(i==0){
					data.productOrder[data.showOrderId].count++;
				}else if(i==1) data.productOrder[data.showOrderId].count--;
			}
			
			function changeNum(i,index){
				if(i==0) data.productOrder[index].count++
				else if(i==1) data.productOrder[index].count--
			}
			
			function goSettle(){
				uni.navigateTo({
					url:"/page_product/product/product-settle?settleInfo="+encodeURIComponent(JSON.stringify(data.productOrder))
				})
			}
			
			return {
				data,
				navBarHeight,
				changePrice,
				showPop,
				changePop,
				show,
				goDetail,
				changeCount,
				price,
				changeNum,
				goSettle
			}
		}
	}
</script>

<style scoped lang="scss">
	.whole-container{
		min-height: 100vh;
		background-color: #dddddd;
	}
	
	.product-detail-container{   
		min-height: 100vh;
		
		& .product-detail-image{
			width: 750rpx;
			height: 450rpx;
		}
		
		& .product-detail-title{
			line-height: 35rpx;
			width: 680rpx;
			font-size: 35rpx;
			font-weight: bold;
			margin: 20rpx 35rpx 0 35rpx;
		}
		
		& .product-detail-show-container{
			display: flex;
			width: 680rpx;
			margin: 20rpx 35rpx 0 35rpx;
			font-size: 25rpx;
			color: #888888;
			justify-content: space-between;
		}
		
		& .add-im{
			width: 180rpx;
			text-align: center;
			height:50rpx;
			line-height: 50rpx;
			border-radius: 50rpx;
			font-size: 30rpx;
			padding: 0 10rpx;
			background-color: #9BCDD2;
			color: white;
			margin: 30rpx 30rpx 0 520rpx;
		}
		
		& .image-container{
			display: flex;
			width: 180rpx;
			justify-content: space-between;
			margin: 30rpx 30rpx 0 520rpx;
			
			image{
				width: 50rpx;
			}
		}
		
		& .product-detail-price-container{
			display: flex;
			width: 680rpx;
			margin: 20rpx 35rpx 0 35rpx;
			height: 40rpx;
			
			& .product-detail-discount-price{
				color: #DE6868;
				font-size: 38rpx;
				font-weight: bold;
				line-height: 40rpx;
			}
			
			& .product-detail-price{
				color: #aaaaaa;
				font-size: 28rpx;
				line-height: 40rpx;
				text-decoration: line-through;
				margin-left: 20rpx;
			}
			
		}
		
		& .product-detail-desc{
			width: 680rpx;
			font-size: 30rpx;
			color: #888888;
			margin: 20rpx 35rpx 0 35rpx;
		}
		
		& .add-mi {
			
		}
	}
	
	.product-body-container{
		width: 720rpx;
		padding: 0 20rpx;
		display: flex;
		padding-top: 10rpx;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: #dddddd;
		
		& .product-body-item {
			width: 330rpx;
			margin: 10rpx 15rpx;
			border-radius: 15rpx;
			background-color: white;
		}
	}
	
	.product-swiper-banner{
		width: 750rpx;
		height: 400rpx;
		text-align: center;
		background-color: #dddddd;
		
		image{
			width: 750rpx;
			height: 400rpx;
		}
	}
	
	.product-foot-container{
		display: flex;
		width: 720rpx;
		padding: 0rpx 15rpx;
		position: fixed;
		bottom: 0;
		left:0;
		height: 110rpx;
		background-color: white;
		z-index: 100;
		
		& image{
			width: 60rpx;
			height: 60rpx;
			padding: 10rpx;
			margin: 15rpx 10rpx;
			border-radius: 100rpx;
			border: 3rpx solid #9BCDD2;
		}
		
		& .product-foot-price{
			height: 110rpx;
			line-height: 110rpx;
			font-size: 34rpx;
			
			& text{
				font-size: 25rpx;
			}
		}
		
		& .product-foot-btn{
			position: absolute;
			right: 35rpx;
			height: 80rpx;
			bottom: 15rpx;
			line-height: 80rpx;
			border-radius: 200rpx;
			width: 200rpx;
			background-color: #9BCDD2;
			color: white;
			font-size: 33rpx;
		}
	}
	
	.fruit-popup-container{
		width: 100%;
		height: 100%;
		position: relative;
		
		// background-color: aqua;
		// z-index: 100;
		
		& .box{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			bottom: 0rpx;
			right: 0rpx;
			background-color: rgba(0, 0, 0, 0.4);
			transition: .3s;
			z-index: 10;
		}
		
		& .fruit-popup{
			position: fixed;
			bottom: 110rpx;
			background-color: white;
			width: 730rpx;
			padding: 10rpx;
			z-index: 100;
		}
	}
	
	.show-item{
		width: 710rpx;
		padding: 10rpx 20rpx;
		display: flex;
		position: relative;
		
		image {
			width: 150rpx;
			height: 150rpx;
		}
		
		& .right{
			width: 540rpx;
			margin-left: 20rpx;
			height: 150rpx;
			align-items: center;
			
			
			& .right-title{
				font-size: 30rpx;
				font-weight: bold;
				height: 50rpx;
				line-height: 50rpx;
				overflow: hidden;
			}
			
			& .right-desc{
				font-size: 26rpx;
				color: #888888;
				height: 50rpx;
				line-height: 50rpx;
				overflow: hidden;
			}
			
		}
		
		& .image-container{
			display: flex;
			justify-content: space-between;
			width: 160rpx;
			position: absolute;
			right: 30rpx;
			bottom: 10rpx;
			
			image{
				width: 40rpx;
			}
			
		}
		
	}
</style>
